import * as React from 'react'
import { connect } from 'react-redux'
import { v4 } from 'uuid'
import { fetchPosts } from '../../store/posts/action'
import Item from './item'

class Posts extends React.Component<IAnyObject, IAnyObject> {
  constructor(props: IAnyObject) {
    super(props)
  }

  public componentWillMount() {
    this.props.dispatch(fetchPosts())
  }

  public render() {
    if (this.props.posts.length) {
      return this.props.posts.map((post: IAnyObject) => (
        <Item key={v4()} post={post} />
      ))
    }
    return <div />
  }
}

const mapStateToProps = (state: IAnyObject) => ({
  posts: state.posts
})

export default connect(mapStateToProps)(Posts)
